<template>
	<view>
		<view class="main-historyregist" v-for="(item,index) in list" :key="index">

			<view class="main">
				<view class="main-top">

					<view class="Combination">
						<image src="../../static/image/huodong.png" mode=""></image>
						<text>{{item.actName}}</text>
					</view>

					<view class="fee">
						<text>会员：</text>
						<text>{{item.memberName}}</text>
					</view>

				</view>

				<view class="link">
					<text></text>
				</view>

				<view class="mian-footer">
					<view class="main-left">
						<view v-if="item.actId == 0">
							<text>活动类型id：</text>
							<text>{{item.actId}}</text>
						</view>

						<view v-if="item.createdMan == 0">
							<text>会员id：</text>
							<text>{{item.createdMan}}</text>
						</view>

						<view v-if="item.memberId == 0">
							<text>活动室：</text>
							<text>{{item.memberId}}</text>
						</view>

						<view class="minger">
							<text>性别：</text>
							<text>{{item.genderText}}</text>
							<!-- <text>{{item.numMax}}</text> -->
						</view>

						<view class="minger">
							<text>会员房间号：</text>
							<text>{{item.uniqueCode}}</text>
							<!-- <text>{{item.numMax}}</text> -->
						</view>

						<view>
							<text>会员身份证：</text>
							<text>{{item.idCard}}</text>
						</view>

						<view>
							<text>联系方式：</text>
							<text>{{item.phone}}</text>
						</view>

						<!-- <view>
							<text>状态：</text>
							<text>{{item.state}}</text>
						</view> -->

						<view class="nowrap">
							<text>状态：</text>
							<text :class="'zhuantai' + item.signState">{{item.signStateText}}</text>
						</view>
					</view>
				</view>

				<view class="main-time">
					<view class="main-timeL">
						<text>报名时间:</text>
					</view>
					<view class="main-timeR">
						<text>{{item.signTime}}</text>
						<view>
							<text>至</text>
						</view>
						<view>
							<text>{{item.signTime}}</text>
						</view>
					</view>
				</view>

				<!-- <view class="actives">
					<text>活动内容：</text>
					<view class="active">
						<text>活动内容：</text>
						<text>{{item.content}}</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},

		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ebeff6;
	}

	.main-historyregist {
		width: 94%;
		height: auto;
		background-color: #FFFFFF;
		margin: 32rpx auto;
	}

	.main {
		height: auto;
		margin-left: 26rpx;
	}

	.main-top {
		display: flex;
	}

	.Combination {
		width: 90%;
		height: 72rpx;
		display: flex;
		// margin: 24rpx;
		// justify-content: center;

		image {
			width: 65rpx;
			height: 65rpx;
			margin-top: 12rpx;
		}

		text {
			font-weight: 500rpx;
			margin-left: 8rpx;
			margin-top: 24rpx;
			font-size: 32rpx;
		}

	}

	.fee {
		width: 60%;
		display: flex;

		text {
			float: right;
			font-weight: 500rpx;
			margin-top: 24rpx;
			font-size: 32rpx;
			// border: 1rpx solid;
		}
	}

	.link {
		width: 97%;
		height: 1rpx;
		border-top: solid #ededed;
		margin-top: 16rpx;
	}

	.mian-footer {
		display: flex;
		margin-top: 12rpx;
	}

	.main-left {
		line-height: 56rpx;
		// border: 1rpx solid;

		text {
			font-size: 32rpx;
		}
	}

	.minger {
		display: flex;


		input {
			width: 120rpx;
			height: 56rpx;
			// border: 1rpx solid;
		}
	}

	.actives {
		// display: flex;
		padding: 24rpx;
		margin-top: 24rpx;
		font-size: 32rpx;
	}

	.active {
		width: 96%;
		// height: 188rpx;
		// border: 1rpx solid;
		text-indent: 60rpx;

		text {
			width: 94%;
			font-size: 32rpx;
			word-wrap: break-word;
		}
	}

	.main-right {
		width: 44%;
		line-height: 56rpx;
		// margin-left: 24rpx;
		// border: 1rpx solid;

		text {
			font-size: 32rpx;
		}
	}

	.main-time {
		display: flex;
		margin-top: 16rpx;
		line-height: 56rpx;
		// border: 1rpx solid;

		text {
			font-size: 32rpx;
		}
	}

	.main-timeL {
		width: 145rpx;
		height: 165rpx;
		line-height: 165rpx;
	}

	.main-timeR {
		margin-left: 12rpx;
		text-align: center;
	}

	.nowrap {
		width: 200px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// border: 1rpx solid;

		.zhuantai0 {
			color: #a8a8a8;
		}

		.zhuantai1 {
			color: #a8a8a8;
		}

		.zhuantai2 {
			color: #E17564;
			/* color: #B2B2B2; */
		}

		.zhuantai3 {
			color: #a8a8a8;
		}

		.zhuantai4 {
			color: #a8a8a8;
		}

		.zhuantai5 {
			color: #a8a8a8;
		}

		.zhuantai6 {
			color: #a8a8a8;
		}

		.zhuantai7 {
			color: #a8a8a8;
		}

		.zhuantai8 {
			color: #a8a8a8;
		}

		.zhuantai9 {
			color: #a8a8a8;
		}
	}

	.baoming0 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	.baoming1 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	.baoming2 {
		color: #fef9f9;
		background-color: #f04e56;
	}

	.baoming3 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	.baoming4 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	.baoming5 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	.baoming6 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	.baoming7 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	.baoming8 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	.baoming9 {
		color: #fef9f9;
		background-color: #a8a8a8;
		pointer-events: none;
	}

	button {
		width: 66%;
		height: 60rpx;
		line-height: 60rpx;
		// background-color: #da422a;
		// color: #FFFFFF;
		font-weight: bold;
		text-decoration: none;
		// margin-top: 26rpx;
		font-size: 32rpx;
	}
</style>
